<template>
  <transition name="bounce" mode="out-in">
    <div class="amap-wrapper">
      <el-amap class="amap-box" :plugin="plugin" :vid="'amap-vue'" :center="center" :zoom="zoom">
        <el-amap-marker
          v-if="loaded"
          vid="component-marker"
          :position="componentMarker.position"
          :label="componentMarker.label"
          :animation="componentMarker.animation"
        ></el-amap-marker>
        <el-amap-marker
          v-for="(marker, index) in markers"
          :key="index"
          :position="marker.position"
          :vid="index"
          :content="marker.content"
          :events="marker.events"
        ></el-amap-marker>
        <el-amap-info-window
          v-if="window"
          :position="window.position"
          :visible="window.visible"
          :template="window.template"
          :offset="window.offset"
        >
        </el-amap-info-window>
      </el-amap>
    </div>
  </transition>
</template>

<script>
  export default {
    name: "interact-map",
    data () {
      let self = this;
      return {
        loaded: false,
        plugin: [{
          pName: 'Geolocation',
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  // console.log(result);
                  self.lng = result.position.lng;
                  self.lat = result.position.lat;
                  self.center = [self.lng, self.lat];
                  let address = `${result.addressComponent.township}${result.addressComponent.street}${result.addressComponent.streetNumber}`;
                  self.componentMarker = {
                    animation: 'AMAP_ANIMATION_BOUNCE',
                    position: self.center,
                    label: {
                      content: `<div class="cur-label">我在 <span class=\'bold\'>${address}</span> 附近 ></div>`,
                      offset: [-25, -30]
                    }
                  };
                  self.loaded = true;
                  self.getPosition();
                  self.$nextTick();
                }
              });
            }
          }
        }],
        zoom: 12,
        componentMarker: {},
        center: [121.59996, 31.197646],
        content: '我在 <span class=\'bold\'>--</span> 附近 >',
        markers: [],
        windows: [],
        window: '',
        interactIico: [
          {
            type: 1,
            ico: require('../../assets/images/ico/ic_map_food.png')
          },
          {
            type: 2,
            ico: require('../../assets/images/ico/ic_map_tea.png')
          },
          {
            type: 3,
            ico: require('../../assets/images/ico/ic_map_outdoor.png')
          },
          {
            type: 4,
            ico: require('../../assets/images/ico/ic_map_travel.png')
          }
        ]
      };
    },
    created() {
      this.getPosition()
    },
    methods: {
      getPosition () {
        let self = this;
        let markers = [];
        let windows = [];
        let index = 0;

        let basePosition = self.center;
        let num = 4;

        for (let i = 0 ; i < num ; i++) {
          markers.push({
            position: [basePosition[0]+ i * 0.01, basePosition[1] + i * 0.03],
            content: `<img src="${this.interactIico[i].ico}" width="35">`,
            events: {
              click: () => {
                self.windows.forEach(window => {
                  window.visible = false;
                });

                self.window = self.windows[i];
                self.$nextTick(() => {
                  self.window.visible = true;
                });
              }
            },
          });
          windows.push({
            position: [basePosition[0]+ i * 0.01, basePosition[1] + i * 0.03],
            template: `<div class="prompt">
                        <button class="mui-btn mui-btn-mini" @click="advisory('${i}')">咨询</button>
                        <button class="mui-btn mui-btn-mini mh-btn" @click="handleDetail('${i}')">详情</button>
                      </div>`,
            visible: false,
            offset: [0, -30]
          })
        }
        this.markers = markers;
        this.windows = windows;
      },
      advisory (id) {
        console.log('咨询',id)
      },
      handleDetail (id) {
        console.log('详情',id)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .amap-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
  }
</style>
